<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
       h4 {
        text-align: center;
      }
      section {
        display: flex;
        width: 900px;
        margin: 0 auto;
        justify-content: space-evenly;
      }
      section + section {
        margin-top: 40px;
      }
      .g {
        position: relative;
      }
      .input-g {
        border-bottom: 1px solid #d0d0d5;
      }
      .input-g::after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #2486ff;
        left: 0;
        right: 0;
        bottom: -1px;
        transform: scaleX(0);
        transition: transform 0.25s;
      }
      .input-g:focus-within::after {
        transform: scaleX(1);
      }
      .control {
        margin: 0;
        line-height: 1.5;
        outline: none;
      }
      .input {
        padding: 20px 16px 6px;
        border: 1px solid transparent;
        background: #f5f5f5;
      }
      .outline,
      .textarea {
        padding: 13px 16px 13px;
        border: 1px solid #d0d0d5;
        border-radius: 4px;
        transition: border-color 0.25s;
      }
      .outline:focus,
      .textarea:focus {
        border-color: #2486ff;
      }

      .control:placeholder-shown::placeholder {
        color: transparent;
      }

      .input-label {
        position: absolute;
        font-size: 16px;
        line-height: 1.5;
        left: 16px;
        top: 14px;
        color: #a2a9b6;
        padding: 0 2px;
        transform-origin: 0 0;
        pointer-events: none;
        transition: all 0.25s;
      }

      /* 线框样式label定位 */
      .control:not(:placeholder-shown) + .input-label,
      .control:focus + .input-label {
        color: #2486ff;
        transform: scale(0.75) translate(-2px, -32px);
      }
      /* 填充样式下label定位  (样式覆盖 后来居上) */
      .input:not(:placeholder-shown) ~ .input-label,
      .input:focus ~ .input-label {
        transform: scale(0.75) translateY(-14px);
      }
      /* 线框交互下有个白色背景 */
      .outline ~ .input-label,
      .textarea ~ .input-label {
        background-color: #fff;
      }
  </style>
</head>
<body>
<h4>填充风格</h4>
    <section>
      <div class="g input-g">
        <input class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g input-g">
        <input class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g input-g">
        <input value="hello world" class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>

    <h4>轮廓风格</h4>
    <section>
      <div class="g outline-g">
        <input class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g outline-g">
        <input class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g outline-g">
        <input value="hello world" class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>

    <h4>文本的轮廓风格</h4>
    <section>
      <div class="g textarea-g">
        <textarea class="textarea control" placeholder="邮箱"></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g textarea-g">
        <textarea class="textarea control" placeholder="邮箱"></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g textarea-g">
        <textarea
          value="hello world"
          class="textarea control"
          placeholder="邮箱"
        ></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>
</body>
</html>